import "./Header.css"
import {useState} from "react";

/*
* 接收父组件传递的函数
* */
const Header = ({addTodo}) => {
    /*
    * 代表事项的值
    * */
    const [value, setValue] = useState("")

    /*
    * 修改代办事项值的回调函数(实现表单双向绑定)
    * */
    const changeValue = (event) => {
        setValue(event.target.value)
    }
    /*
    * 点击添加代办事项的回调函数
    * */

    const handleAddTodo = () => {
        if (value.length <= 0) return alert("请输入待办事项")
        // 待添加的todo对象
        const todo = {
            id: Date.now(),
            checked: true,
            text: value
        }
        // 调用父组件传递过来的函数
        addTodo(todo)
        // 清空输入框的值
        setValue("")
    }

    return (
        <div className="header">
            <input type="text" name="" placeholder="请输入代办事项" className="layui-input" value={value} onChange={changeValue}/>
            <button type="button" className="layui-btn" onClick={handleAddTodo}>添加</button>
        </div>
    )
}

export default Header;
